import { ProForm, ProFormText } from '@ant-design/pro-components';
import { useSearchParams, history } from '@umijs/max';
import { Button, message } from 'antd';
import { createStyles } from 'antd-style';
import { dyCpsInviteUser } from '@/services/ant-design-pro/api';
const useStyles = createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});
// 类型定义
interface RegisterFormProps {
  formType?: number;        // 表单类型
  requestStatus?: boolean;  // 请求状态
  userRole: Record<string, string>; // 角色枚举
  cpsConf: { value: string; label: string }[]; // 渠道配置
}

const RegisterPage: React.FC<RegisterFormProps> = (props) => {
  const [form] = ProForm.useForm();
  const { styles } = useStyles();
  const [searchParams] = useSearchParams();
  const inviteId = searchParams.get('inviteId');


  const handleSubmit = async (values: any) => {
    try {
      console.log(values);
      // 登录
      const msg = await dyCpsInviteUser({ ...values , inviteId});
      if (msg.code === 'SUCCESS') {
        message.success('登陆成功~');
        const urlParams = new URL(window.location.href).searchParams;
        history.push(urlParams.get('redirect') || '/');
        return;
      } else {
        message.error(msg.msg);
      }
      // 如果失败去设置用户错误信息
    } catch (error) {
      message.error('登录失败，请重试！');
    }
  };

  return (
    <div className={styles.container}>
       <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: "column",
          padding: '32px 0',
        }}
      >
        <div 
          style={{
            fontSize: '18px',
            fontWeight: 'bold',
            paddingBottom: '20px'
          }}
        >立即注册</div>
      <ProForm
        form={form}
        title='立即注册'
        layout="horizontal"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 12 }}
        submitter={{
          resetButtonProps: { style: { display: 'none' } },
          submitButtonProps: { style: { width: '100%' } },
        }}
        onFinish={handleSubmit}
        autoFocusFirstInput
        // submitter={{
        //   render: (_, dom) => [
        //     // ...dom,
        //     <Button
        //       key="submit"
        //       type="primary"
        //       htmlType="submit"
        //       style={{
        //           width: "328px", 
        //           marginLeft: 'auto', // 右对齐
        //           marginRight: 'auto' // 居中对齐
        //         }}
        //     >
        //       立即注册
        //     </Button>
        //   ]
        // }}
      >
        {/* 基础信息 */}
        <ProFormText
          width="md"
          name="nickname"
          label="用户名"
          tooltip="最长为 24 位"
          placeholder="请输入用户名"
          rules={[
            { required: true, message: '用户名不能为空!' },
            { max: 24, message: '用户名不能超过24个字符' }
          ]}
        />
        <ProFormText
          width="md"
          name="mobile"
          label="手机号"
          placeholder="请输入手机号"
          rules={[
            { required: true, message: '手机号不能为空!' },
            { min: 11, max:11, message: '手机号需要11位' }
          ]}
        >
        </ProFormText>
        <ProFormText.Password
          width="md"
          name="password"
          label="密码"
          placeholder="请输入密码"
          rules={[
            { required: true, message: '密码不能为空!' },
            { min: 6, message: '密码至少6位' }
          ]}
        />
       
        <ProFormText
          width="md"
          name="wechat"
          label="微信号"
          placeholder="请输入微信号"
          rules={[{ required: props.requestStatus, message: '微信号不能为空!' }]}
        />
        <ProFormText
          width="md"
          name="zfbName"
          label="支付宝姓名"
          placeholder="请输入支付宝姓名"
          rules={[{ required: props.requestStatus, message: '支付宝姓名不能为空!' }]}
        />
        <ProFormText
          width="md"
          name="zfbAcount"
          label="支付宝账号"
          placeholder="请输入支付宝账号"
          rules={[
            { required: props.requestStatus, message: '支付宝账号不能为空!' },
            { pattern: /(^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$)|(^1[3-9]\d{9}$)/, 
              message: '账号格式错误' }
          ]}
        />

        <ProFormText
          width="md"
          name="bankName"
          label="开户行名称"
          placeholder="请输入开户行名称"
          rules={[{ required: props.requestStatus, message: '开户行名称不能为空!' }]}
        />
        <ProFormText
          width="md"
          name="subBankName"
          label="支行名称"
          placeholder="请输入支行名称"
          rules={[{ required: props.requestStatus, message: '支行名称不能为空!' }]}
        />
        <ProFormText
          width="md"
          name="bankUserName"
          label="持卡人名字"
          placeholder="请输入持卡人名字"
          rules={[{ required: props.requestStatus, message: '持卡人名字不能为空!' }]}
        />
        <ProFormText
          width="md"
          name="bankNum"
          label="开户行账号"
          placeholder="请输入开户行账号"
          rules={[
            { required: props.requestStatus, message: '开户行账号不能为空!' },
            { pattern: /^\d{16,19}$/, message: '银行卡号格式错误' }
          ]}
        />
      </ProForm>
      </div>
    </div>
  );
};

export default RegisterPage;
